<template>
    <div id="notes-list">
        <div id="list-header">
            <h2>记事本 | Notepad</h2>
            <div class="btn-group btn-group-justified" role="group">
                <!-- all -->
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default"
                            @click="toggleShow('all')"
                            :class="{active: show === 'all'}">全部笔记</button>
                </div>

                <!-- favorites -->
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default"
                            @click="toggleShow('favorite')"
                            :class="{active: show === 'favorite'}">收藏</button>
                </div>
            </div>

            <div class="btn-group btn-group-justified" role="group">
                <div class="input-group search">
                    <input type="search" class="form-control" v-model="search" placeholder="搜索...">
                    <span class="input-group-addon">
                        <i class="glyphicon glyphicon-search"> </i>
                    </span>
                </div>
            </div>
        </div>

        <div id="container">
            <div class="list-group">
                <a v-for="note in filteredNotes" transition="expand"
                   class="list-group-item"
                   @click="updateActiveNote(note)"
                   :class="{active: activeNote.id === note.id}">
                    <h4 class="list-group-item-heading">
                        {{note.title.trim().substring(0, 30) || '...'}}
                    </h4>
                    <p class="list-group-item-text">
                        {{note.content.trim().substring(0, 30)}}
                    </p>
                </a>
                <div v-show="!filteredNotes.length && ready" class="text-center">
                    还没有笔记? <a href="#" @click="newNote">写一个</a>吧。
                </div>
                <div v-show="!filteredNotes.length && !ready" class="text-center">加载中...</div>
            </div>
        </div>
    </div>
</template>
<script>
    import { updateActiveNote, updateShow, newNote } from '../vuex/action'
    import { show, filteredNotes, activeNote, ready } from '../vuex/getter'
    export default{
        data () {
            return {
                search: ''
            }
        },
        vuex: {
            getters: {
                show,
                filteredNotes,
                activeNote,
                ready
            },
            actions: {
                updateActiveNote,
                updateShow,
                newNote
            }
        },
        methods: {
            toggleShow (show) {
                this.updateShow(show)
            }
        }
    }
</script>

<style lang="scss" scoped>
    #notes-list {
        float: left;
        width: 300px;
        height: 100%;
        background-color: #F5F5F5;
        font-weight:400;
        font-family: 'Raleway', sans-serif;

        #list-header{
            padding: 5px 25px 25px 25px;

            h2{
                font-weight: 300;
                text-transform: uppercase;
                text-align: center;
                font-size: 22px;
                padding-bottom: 8px;
            }

            .btn-group {
                .btn-default {
                    color: #30414d;
                    border-color: #dddddd;
                    background-color: #dddddd;
                    outline: 0;
                    border-radius: 0;
                }
                .active{
                    border-color: #3da077;
                    background-color: #3da077;
                    box-shadow: none;
                    color: #dddddd;
                }
            }

            .search{
                margin-top: 20px;

                .form-control{
                    border-radius: 0;
                    outline: 0;
                    color: #3da077;
                    background-color: #ffffff;
                    border-color: #3da077;
                }
                .input-group-addon{
                    border-radius: 0;
                    outline: 0;
                    background-color: #3da077;
                    border-color: #3da077;
                    color: #dddddd;
                }
            }
        }

        #container {
            height: calc(100% - 204px);
            max-height: calc(100% - 204px);
            overflow: auto;
            width: 100%;
            padding: 0;

            .list-group-item{
                border: 0;
                border-radius: 0;
                cursor: pointer;

                .list-group-item-heading{
                    font-weight: 300;
                    font-size: 15px;
                }

                &.active{
                    /*background-color: #3da077;*/
                    background-color: #30414d;
                }
            }
        }
        .expand-transition {
            transition: all .1s linear;
            background-color: #eee;
        }

        .expand-enter, .expand-leave {
            padding: 0 10px;
            opacity: 0;
        }
    }
</style>
